<template>
    <div id="game">
        <!-- <paint :color="color"></paint> -->
        <div class="game">
            <scroll :data="gameLists" class="game-wrap" :pullup="pullup" @pullup="loadData" :pulldown="pulldown" @pulldown="reloadData" :pulldownUI="pulldownUI">
                <div class="content">
                    <div class="banner">
                        <slider>
                            <div v-for="item in recommends">
                            <a>
                                <img class="needsclick"  :src="item">
                            </a>
                            </div>
                        </slider>
                    </div>
                    <div class="new-tap f-cb">
                        <router-link to="/service">
                            <img src="../assets/open_list.png" alt="">
                        </router-link>
                        <router-link to="/">
                            <img src="../assets/hfgame.png" alt="">
                        </router-link>
                    </div>
                    <h3>热门手游</h3>
                    <div class="gameLists">
                        <div class="model" v-for="item in gameLists" @click="selectItem(item)">
                            <div class='icon'>
                                <img  v-lazy="item.mobileicon" alt="" width="64">
                            </div>
                            <div class="content">
                                <div class="name">{{item.name}}</div>
                                <div class="size">{{item.version_size}}</div>
                                <div class="desc">{{item.publicity}}</div>
                            </div>
                            <div class="down">
                                <span>下载</span>
                            </div>
                        </div>
                    </div>
                    <div class="loading-container" v-show="loadingShow">
                        <loading></loading>
                    </div>
                </div>
            </scroll>
        </div>
        <router-view></router-view>
    </div> 
</template>
<script>
    
    import scroll from 'components/scroll'
    import paint from 'components/paint'
    import loading from 'components/loading'
    import slider from 'components/slider'
    export default{
        data(){
            return{
                color:"red",
                gameLists:[],
                isload:false,
                pullup:true,
                pulldownUI:true,
                pulldown: true,
                loadingStatus:{status:""},               
                loadingShow:false,
                recommends: ["http://ks3.17byh.com/images/2018-04-15/5ad35b67b501f.jpg","http://ks3.17byh.com/images/2018-04-15/5ad2d022d88f6.jpg","http://ks3.17byh.com/images/2018-04-13/5ad09f7f8617b.jpg"]
            }
        },
        created(){
            this.loadData();
        },
        methods:{
            loadData(){
                this.loadingShow=true;
                //判断是否可以下拉
                if(this.isload==true){
                    return;
                }
                this.isload=true;
                setTimeout(() => {
                    this.$axios.get('/api/game').then(res=>{
                     this.isload=false;
                    res=res.data.data.data;
                    console.log(res);
                    if(res.length==0){
                        this.loadingShow=false;
                    }
                    this.gameLists=res.concat(this.gameLists);
                    })
                }, 2000);
            },
            reloadData(){
                this.gameLists=[];
                this.loadData();
            },
            selectItem(item){
                this.$router.push({
					// path:`/game/${item.id}`,query:{id:item.id}
					   path:`/game/${item.id}`
				})
            }
        },
        components:{
            scroll,
            loading,
            slider,paint
        }
    }
</script>
<style lang="scss" scoped>
    #game{
       position: fixed;
        top: 0px;
        width: 100%;
        bottom: 50px;
    }
    .new-tap{
        margin:15px 0;
        a{
            display:inline-block;
            width:50%;
            float:left;
            box-sizing: border-box;
            padding: 0 5px 0 10px;
            img{
                width:100%;
            }
        }
        a:last-child{
             padding: 0 10px 0 5px;
        }
    }
    .new-tap:after{
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        overflow:hidden;
        content:".";
    }
    .game{
        position:fixed;
        top:48px;
        bottom:40px;
        width:100%;
        overflow:hidden; 
        .game-wrap{
            height: 100%;
            overflow: hidden;
        }
        .content{
            padding-bottom:20px;
            overflow:hidden;
            width:100%;
            h3{
                padding:0 8px;
            }
        }
        .gameLists{ 
            width:100%;
            overflow:hidden;
            .model{
                display:flex;
                padding:0 8px 20px 8px;
                .icon{
                    margin-right:10px;
                }
                .content{
                   flex:1;
                    display:flex;
					flex-direction:column;
                    justify-content: space-around;
                    overflow:hidden;
                    .desc{
                        white-space: nowrap;
                       overflow: hidden;
                       text-overflow:ellipsis; 
                    }
                    .name{
                        font-weight: 600;
                        font-size: 16px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .size,.desc{
                        font-size: 14px;
                        color: #989898;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: inline-block;
                        line-height: 22px;
                    }
                }
                .down{
                    width:50px;
                    height:20px;
                    line-height:20px;
                    background: #2ecc71;
                    color: white;
                    padding: 5px 0px;
                    border-radius: 3px;
                    display: inline-block;
                    text-align: center;
                    font-size: 14px;
                }
            }
        }
        .loading-container{
            text-align:center;
        }
    }
</style>
